<template>
  <view class="su-date">
    <nut-cell :desc="desc" @click="visible = true" is-link class="su-date-desc"></nut-cell>
    <nut-popup v-model:visible="visible" :position="position">
      <nut-date-picker
        ref="dateRef"
        v-model="text"
        :type="type"
        :minuteStep="minuteStep"
        :isShowChinese="isShowChinese"
        :minDate="minDate"
        :maxDate="maxDate"
        :filter="filter"
        :title="title"
        :okText="okText"
        :cancelText="cancelText"
        :threeDimensional="threeDimensional"
        :swipeDuration="swipeDuration"
        :visibleOptionNum="visibleOptionNum"
        :optionHeight="optionHeight"
        :showToolbar="showToolbar"
        :formatter="formatter"
        v-on="onEvents"
      >
        <template v-for="slot in Object.keys($slots)" #[slot]="scope">
          <slot v-bind="scope" :name="slot" />
        </template>
      </nut-date-picker>
    </nut-popup>
  </view>
</template>

<script setup>
import { commonProps } from '@/supreme/core/props';
import { useEvents } from '@/supreme/core';
import { useVModel } from '@vueuse/core';
import { isEmpty } from 'lodash-es';
defineOptions({
  name: 'SuDate'
});
const props = defineProps({
  ...commonProps,
  modelValue: {
    type: String,
    default: ''
  },
  position: {
    type: String,
    default: 'bottom'
  },
  minuteStep: {
    // 修正拼写错误
    type: Number,
    default: 1
  },
  isShowChinese: {
    type: Boolean,
    default: false
  },
  minDate: {
    type: Date
  },
  maxDate: {
    type: Date
  },
  formatter: {
    type: Function
  },
  filter: {
    type: Function
  },
  title: {
    type: String,
    default: ''
  },
  okText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  threeDimensional: {
    type: Boolean,
    default: false
  },
  swipeDuration: {
    type: [Number, String],
    default: 1000
  },
  visibleOptionNum: {
    type: [Number, String],
    default: 7
  },
  optionHeight: {
    type: [Number, String],
    default: 36
  },
  showToolbar: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
const text = useVModel(props, 'modelValue', emit);
const formSafe = inject('formSafe');
const dateRef = ref();
const visible = ref(false);
const desc = computed(() => {
  if (isEmpty(text.value)) {
    return props.placeholder;
  }
  if (typeof props.format === 'function') {
    return props.format(text.value);
  }
  return props.format(text.value);
});
const onEvents = computed(() => {
  const events = [
    {
      name: 'confirm',
      callback: () => {
        visible.value = false;
      }
    },
    {
      name: 'cancel',
      callback: () => {
        visible.value = false;
      }
    },
    {
      name: 'change'
    }
  ];
  return useEvents({ props, events, emit, form: formSafe?.form });
});
</script>

<style lang="scss">
.su-date {
  .nut-cell.su-date__desc {
    box-shadow: none;
    padding: 0;
  }
}
</style>
